<template>
    <div class='desktopList'>
        <div  v-for="(item,index) in desktop" :key="index" class='desktopList_item' :style="{'width':item.width,'height':item.height,'marginTop':'10px'}">
            <div class='desktop_list' v-if="item.type=='list'" style='height:100%'>
                <div class='desktop_list_title'>
                    {{item.name}}
                </div>
                
                <list :commonListData="item" devSet="" :company="company"   @openWin="openWin2" ></list>
               
            </div>
           
            <desktop-num v-if="item.type=='num'" :appid="item.appid" :url="item.url" @openWin="openWin2"></desktop-num>
            
            <pie-chart v-if="item.type=='pie'" :id="index"  :appid="item.appid" :url="item.url" :name="item.name"></pie-chart>
            <bar-chart v-if="item.type=='bar'" :id="index"  :appid="item.appid" :url="item.url" :name="item.name"></bar-chart>

            
            <desktop-duty v-if="item.type=='duty'" :appid="item.appid" :name="item.name" :url="item.url"></desktop-duty>
            <desktop-mode v-if="item.type=='mode'" :appid="item.appid" :name="item.name" :url="item.url"  @openWin="openWin2"></desktop-mode>
            
         
        </div>
    </div>
</template>
<script>
import List  from '../List.vue'
import DesktopNum  from './DesktopNum.vue'
import DesktopDuty  from './DesktopDuty.vue'
import DesktopMode  from './DesktopMode.vue'
import pieChart  from '../../components/chart/pieChart.vue'
import barChart  from '../../components/chart/barChart.vue'
export default {
   components: {
        List,
        DesktopNum,
        DesktopDuty,
        DesktopMode,
        pieChart,
        barChart
    },
    data(){
        return{
            desktop:[],
            filename:'',
            company:"",
            month:""
        }
    },
    created(){
        if(this.$route.query.data){
            this.desktop=JSON.parse(this.$route.query.data);
        }
        if(this.$route.query.company){
            this.company=this.$route.query.company
        }
        if(this.$route.query.filename){
            this.filename=this.$route.query.filename;
        }
        this.loadData();
    },
    methods:{
        reloadData(filename){
            this.filename=filename;
            this.loadData();
        },
        initData(){
            this.loadData();
        },
        loadData(){
            this.$post("business","api/view/getDesktopData",{filename:this.filename}).then(data=>{
        
                let desktops=data.desktop;
                let groupName=sessionStorage.getItem("groupName")
                let desktop=[];
                for(let i=0;i<desktops.length;i++){
                    let group=desktops[i].group;
                    let nogroup=desktops[i].nogroup;
                    let isAdd=true;
                    if(group&&(','+group+",").indexOf(","+groupName+",")==-1){
                        isAdd=false;
                    }
                    if(nogroup&&(','+group+",").indexOf(","+groupName+",")!=-1){
                        isAdd=false;
                    }
                    if(isAdd){
                        desktop.push(desktops[i])
                    }

                }
                this.desktop=desktop;
                //this.desktop=data.desktop;
            })
        },
        openWin2(data){
            console.log("打开窗口===================================================");
            console.log(data)
            this.$emit("openWin",data);
        }
    }
}
</script>
<style scoped>
.duty>>>.el-calendar-day{
    height:35px;
}
.desktopList{
    height:100%;
    padding:20px;
    box-sizing: border-box;
    overflow: auto;
}
.desktopList_item{
    float:left;
}
.desktop_list{
    padding:10px;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 3px rgba(195, 206, 220, 0.07);
    border-radius: 8px;
}
.desktop_list_title{
    font-family: PingFangSC-Heavy, PingFang SC;
    font-weight: 800;
    color: #434E7E;
}
</style>